<template>
  <div>
    <div class="num">
      <p class="p">156622563 32050060 121309348 3263155</p>
      <p class="sp">
        <span>累计确诊</span><span>现存确诊</span><span>累计治愈</span
        ><span>累计死亡</span>
      </p>
    </div>
    <div class="dvsp">
      <span class="sp1 qz">累计确诊</span>
      <span class="sp1">现存确诊</span>
    </div>
    <div class="dv1">
      <div class="bg1"></div>
      <div class="bg2"></div>
      <div class="bg3"></div>
      <div id="maincenter">

    </div>
    </div>
    
  </div>
</template>

<script setup lang="ts">
import "../utils/china";
import echarts from "echarts";
import { dataMap } from "../utils/dataMap";
import { nameMap } from "../utils/nameMap";
import { onMounted } from "vue";
import { getForeinData } from "../../charts";

 let option= {
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        var value = (params.value + "").split(".");
        value =
          value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, "$1,") +
          "." +
          value[1];
        return params.seriesName + "<br/>" + params.name + " : " + value;
      },
    },
    visualMap: {
      min: 0,
      max: 1000000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      color: ["orangered", "yellow", "lightskyblue"],
    },
    series: [
      {
        name: "World Population (2010)",
        type: "map",
        mapType: "world", // roam: true,
        itemStyle: {
          emphasis: { label: { show: true } },
        },
        data: dataMap,
        nameMap: nameMap,
      },
    ],
  }


onMounted(() => {
  var chartDom = document.getElementById('maincenter');
var myChart = echarts.init(chartDom);
myChart.setOption(option)
  getForeinData().then((res) => {
    console.log(res);
  });
   window.addEventListener(
    "resize",
    function () {
      myChart.resize();
    },
    false
  );
});
</script>

<style lang="scss">
@font-face {
  font-family: electronicFont;
  src: url("../assets/DS-Digital/DS-DIGIT-4.ttf");
}
.num {
  font-family: electronicFont;
}
.p {
  color: #ffc24b;
  font-size: 45px;
  text-align: center;
}
.sp {
  width: 97%;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.dvsp {
  width: 60%;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
}
.dv1 {
  position: relative;
  height: 705px;
}
.sp1 {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 20px;
}
.qz {
  color: #ffc24b;
}
.bg1 {
  width: 400px;
  left: 50%;
  top: 50%;
  height: 400px;
  background: url("../../public/img/map.bab2b509.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.bg2 {
  width: 500px;
  height: 500px;
  background: url("../../public/img/lbx.0dea0f97.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: rotate1 15s linear infinite;
}
.bg3 {
  background: url("../../public/img/jt.c268bab5.png");
  background-size: 100% 100%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  animation: rotate2 15s linear infinite;
}
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
#maincenter{
   height: 320px;
  text-align: center;
  padding: 0 10px;
  margin-top: 10px;
left: 50%;
top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;

}
</style>
